<template>
   <div class="comment">
       <div class="putcomment">
           <div class="putcommentleft">
               <img :src="this.$store.state.readerdata.headerimg" alt="">
           </div>
           <div class="putcommentcenter">
               
                <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="comment">
                </el-input>
           </div>

           <div class="putcommentright">
               <el-button @click="putcomment">提交评论</el-button>
           </div> 
       </div>

       <!-- <h2>评论列表</h2> -->
       <ul>
           <li v-for="item in commentlist" :key="item.id">
               <div class="left">
                    <img :src="item.headerimg" alt="">
               </div>
               <div class="right">
                    <div class="header">
                    <span>{{item.author}}</span>
                    </div>
                    <div class="center">
                        <span>{{item.comment}}</span>
                    </div>
                    <div class="bottom">
                        <span>{{item.pushdate|dataFormat('YYYY-MM-DD HH-mm-ss')}}</span>
                        <span>👍</span>
                        <span>👎</span>
                        <span>回复</span>
                    </div>
               </div>      
           </li>
       </ul>
   </div>
</template>

<script>

export default {
data(){
    return {
         comment: '',
         readername:''
    }
},
created(){
  this.readername=this.$store.state.readerdata.author
},
props:[
    'commentlist'
],
methods:{
      //提交评论
        async putcomment(){
            let data=await this.axios.post("article/putcomment",{
                articleid:this.$store.state.articleid,
                readerid:this.$store.state.readerdata.id,
                comment:this.comment,
            })
            // console.log(data)
            this.comment=''
            this.$emit("handleMethods")
        },
},
}
</script>

<style lang="less" scoped>
.comment {
    width: 100%;
    margin-bottom: 50px;
  .putcomment {
      display: flex;
      border-bottom: 1px solid #ccc;
      border-top: 1px solid #ccc;
    .putcommentleft {
        flex:1;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      img {
        display: block;
        width: 58px;
        height: 58px;
        padding: 3px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid #ccc;
      }
    }

    .putcommentcenter {
        flex:16;
           display: flex;
        justify-content: center;
        align-items: center;
        .el-input:hover{
            border: 1px solid #0000cc;
        }

    }

    .putcommentright {
        flex:2;
           display: flex;
        justify-content: center;
        align-items: center;
      el-button {

      }
    }
  }

ul {list-style: none;
  li {
      border-bottom: 1px solid #ccc;
      padding: 10px 20px;
      display: flex;
      background-color: #fff;
    div.left {
        flex:1;
        // padding:;
        display: flex;
        justify-content: center;
        align-items: center;
      img {
          display: block;
        width: 58px;
        height: 58px;
        padding: 3px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid #ccc;

      }
    }

    div.right {
        flex: 18;
        padding-left: 20px;
        display: flex;
        flex-direction: column;
      div.header {
        span {
            color: #70a1ff;
            font-weight: 600;
            font-size: 18px;
        }
      }

      div.center {
        margin-top: 10px;
        span {
             overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        cursor: pointer;
        }
      }

      div.bottom {
         margin-top: 10px;
        span{
          margin-right:20px;
          cursor: pointer;
        }
      }
    }
  }
}
}
</style>